<template>
  <el-form :model="list" label-width="80px">
    <p class="title">商品管理-添加商品</p>
    <el-form-item label="商品名称">
      <el-input v-model="list.name"></el-input>
    </el-form-item>
    <el-form-item label="商品描述">
      <el-input v-model="list.subtitle"></el-input>
    </el-form-item>
    <el-form-item label="所属分类">
      <el-select v-model="list.region" @change="change" placeholder="请选择一级品类">
        <el-option v-for="(item,key) in arrList" :key="key" :label="item.name" :value="item.name"></el-option>
      </el-select>
      <el-select v-if="list.region" v-model="list.region2"  placeholder="请选择二级品类">
        <el-option v-for="(item,key) in this.arrList2" :key="key" :label="item.name" :value="item.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input type="number" v-model="list.price">
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="商品库存">
      <el-input type="number" v-model="list.stock">
        <template slot="append">件</template>
      </el-input>
    </el-form-item>
    <el-upload
      class="upload-demo"
      name="upload_file"
      action="/api/product/upload.do"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      list-type="picture-card"
      style="margin-top:20px"
      v-model="list.subImages"
      :on-success="handleSuccess"
    >
      <el-button size="medium" type="primary">点击上传</el-button>
    </el-upload>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      style="margin-top:20px"
    />
    <el-button size="medium" type="primary" class="btn" @click="add()">提交</el-button>
    
  </el-form>
</template>

<script>
import { add, cook } from "@/request/http";
export default {
  data() {
    return {
      list: {
        categoryId: 0,
        name: "",
        subtitle: "",
        stock: "",
        region2: "",
        region: "",
        subImages: "",
        detail: "",
        price: "",
        status: 1
      },
      content: "",
      editorOption: {
        // Some Quill options...
      },
      arrList: [],
      arrList2: [],
     
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      this.list.subImages=file.response.data.url
      console.log(file.response.data.url)
    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
     handleSuccess(response, file, fileList) {
          this.list.subImages = response.data.url;
          console.log("cg", response, file, fileList);
          console.log(this.list.subImages);
        },
    add() {
      //添加商品
      cook(this.list).then(res => {
        console.log(res);
        alert(res.data.data);
        this.$router.push("/shopgl");
      });
    },
    start() {
      add(this.list.categoryId).then(res => {
        this.arrList = res.data.data;
        console.log(this.arrList);
      });
    },
    change(k){
      console.log(k)
        this.arrList.map((item,key)=>{
          // console.log(item.name)
          if(item.name===k){
            add(item.id).then(res=>{
              console.log(res)
              this.arrList2=res.data.data
              console.log(this.arrList2)
            })
          }
        })
    }
  },
  mounted() {
    this.start();
  },
  computed: {
        editor() {
          return this.$refs.myQuillEditor.quill

        }
      },
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.title {
  @include FontOnly(35px);
  margin-bottom: 30px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-item {
  width: 50%;
  margin-top: 30px;
}
.btn {
  width: 50px;
  height: 25px;
  margin-top: 20px;
}
</style>